<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-shop"></i>
          订单管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="search.issueUserId" placeholder="商家用户手机号" class="handle-input mr10"></el-input>
        <el-input v-model="search.orderNo" placeholder="订单号" class="handle-input mr10" width="55"></el-input>
        <el-input v-model="search.userId" placeholder="下单用户手机号" class="handle-input mr10" width="55"></el-input>
        <el-select class="handle-input mr10" v-model="search.status" placeholder="订单状态">
          <el-option v-for="item in tradeStatus" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <!-- <el-button type="primary" @click="showExport = true">导出</el-button>
        <el-button type="primary" @click="showAlldelivery = true">批量发货</el-button> -->
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <el-table-column prop="mcName" :show-overflow-tooltip="true" label="商户商品名称"></el-table-column>
        <el-table-column prop="money" label="金额" align="center"></el-table-column>
        <el-table-column prop="numbers" label="数量" align="center"></el-table-column>
        <el-table-column prop="orderNo" label="订单号" align="center"></el-table-column>
        <el-table-column prop="recipientsAddress" label="收件人详细地址" align="center" width="120"></el-table-column>
        <el-table-column prop="recipientsMobile" label="收件人手机号" align="center"></el-table-column>
        <el-table-column prop="recipientsName" label="收件人姓名" align="center"></el-table-column>
        <el-table-column prop="standard" label="商品规格" align="center"></el-table-column>
        <el-table-column prop="userMobile" label="下单用户手机号" align="center"></el-table-column>
        <el-table-column prop="userName" label="下单用户名称" align="center"></el-table-column>
        <el-table-column prop="voucher" label="支付凭证" align="center"></el-table-column>
        <el-table-column label="订单状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.tradeStatus == '0'">已提交凭证</el-tag>
            <el-tag v-else-if="scope.row.tradeStatus == '1'">确认打款</el-tag>
            <el-tag v-else>已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="confirmationTime" label="确认打款时间" width="160" align="center" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="cancelTime" label="取消时间" width="160" align="center" :formatter="dateFormat"></el-table-column>
        <!-- <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-lx-attention"
              @click="handleCheak(scope.$index, scope.row)">查看</el-button>
            <el-button type="text" class="green" @click="isdelivery(scope.$index, scope.row)">{{ scope.row.expressStatus
              == 0 ? "发货" : "已发货" }}</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="商品信息" v-model="showCheak" width="90%">
      <el-form ref="form" :model="list" label-width="130px" :disabled="isDisabled">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称">
              <el-input v-model="list.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品一级分类">
              <el-input v-model="list.commodityClassifyLevel1Name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="规格">
              <el-input v-model="list.standard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库存">
              <el-input v-model="list.stock"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="详情">
          <Tinymce-editor :disabled="isDisabled" :value="list.contextDetails" @input="(res) => (list.contextDetails = res)"></Tinymce-editor>
        </el-form-item>
        <el-row>
          <el-col :span="16">
            <el-form-item label="说明">
              <el-input type="textarea" placeholder="请输入内容" v-model="list.explains" show-word-limit :rows="8" resize="none"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品图片">
              <div class="crop-demo">
                <img v-if="list.showPic" :src="joinpic(list.showPic)" class="pre-img" />
              </div>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="商品详情图">
              <el-upload action="" list-type="picture-card" :on-preview="picPreview" :file-list="picList" ref="picClear" class="hide">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" class="picPreview" />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 导出框 -->
    <el-dialog title="导出" v-model="showExport" width="30%">
      <el-form ref="form" :model="eList" label-width="100px">
        <el-form-item label="创建时间范围">
          <el-date-picker v-model="eList.createTime" type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-radio-group v-model="eList.tradeStatus">
            <el-radio :label="0">待支付</el-radio>
            <el-radio :label="1">待发货</el-radio>
            <el-radio :label="2">待收货</el-radio>
            <el-radio :label="3">已取消</el-radio>
            <el-radio :label="4">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExport = false">取 消</el-button>
          <el-button type="primary" @click="orderExport">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 发货信息 -->
    <el-dialog title="发货信息" v-model="showDelivery" width="30%">
      <el-form ref="form" :model="addList" label-width="100px">
        <el-form-item label="收件人姓名">
          <el-input disabled v-model="addList.name"></el-input>
        </el-form-item>
        <el-form-item label="收件人手机号">
          <el-input disabled v-model="addList.mobile"></el-input>
        </el-form-item>
        <el-form-item label="收件地址">
          {{ addList.province + addList.city + addList.district + ' ' + addList.address }}
        </el-form-item>
        <el-form-item label="收件人手机号">
          <el-input v-model="addList.mobile"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDelivery = false">取 消</el-button>
          <el-button type="primary" @click="delivery">发 货</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 批量发货 -->
    <el-dialog title="发货信息" v-model="showAlldelivery" width="30%">
      <div class="crop-demo">
        <input class="crop-input" type="file" @change="setFile" :disabled="isDisabled" />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAlldelivery = false">取 消</el-button>
          <el-button type="primary" @click="allDelivery">发 货</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { orderList, orderCheck, orderEmit } from '../../api/zyMall'
import { api, apiEx, upload } from '@/api/index'
import { formatDate } from '../../common/data'
import TinymceEditor from '../../components/tinymce-editor'
import moment from 'moment'
export default {
  inject: ['reload'],
  name: 'basetable',
  components: {
    TinymceEditor,
  },
  data() {
    return {
      query: {
        parentid: '832cf97356bb4f5ea1d03a115992cd52',
        status: 100,
        pageNo: 1,
      },
      search: {
        createTime: null,
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      showCheak: false,
      showExport: false,
      showDelivery: false,
      showAlldelivery: false,
      pageTotal: 0,
      form: {},
      list: {},
      eList: {
        createTime: null,
      },
      addList: {},
      createTime: null,
      expressStatus: [
        {
          value: 0,
          label: '未发货',
        },
        {
          value: 1,
          label: '已发货',
        },
      ],
      tradeStatus: [
        {
          value: 0,
          label: '已提交凭证',
        },
        {
          value: 1,
          label: '确认打款',
        },
        {
          value: 2,
          label: '已取消',
        },
      ],
      expressStatusText: '',
      tradeStatusText: '',
      picList: [],
      dialogVisible: false,
      allDeliveryUrl: '',
    }
  },
  created() {
    this.getData()
  },
  methods: {
    joinpic(item) {
      return `https://mall.xiyibaomall.com/imgs/${item}`
    },

    // 时间戳转换
    dateFormat: function (row, column) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    timeFormat(item) {
      return `${formatDate(new Date(item[0]), 'yyyy-MM-dd hh:mm:ss')} - ${formatDate(new Date(item[1]), 'yyyy-MM-dd hh:mm:ss')}`
    },

    // 触发搜索按钮
    handleSearch() {
      if (this.search.createTime != null) {
        this.search.createTime = this.timeFormat(this.search.createTime)
      }
      this.getData()
    },

    // 获取列表信息
    getData() {
      api('/web/merchantOrder/g', {
        limit: 10,
        offset: this.query.pageNo,
        issueUserId: this.search.mobile,
        orderNo: this.search.expressStatus || '',
        userId: this.search.createTime || '',
        status: this.search.tradeStatus || '',
      }).then((res) => {
        this.tableData = res.data.rows
        this.pageTotal = res.data.total
      })
    },

    //导出
    orderExport() {
      this.showExport = false
      if (this.eList.createTime != null) {
        this.eList.createTime = this.timeFormat(this.eList.createTime)
      }
      apiEx('/web/so/soe', this.eList).then((res) => {
        const blob = new Blob([res]) // 创建blob对象
        const fileName = '自营订单.xlsx'
        const elink = document.createElement('a') // 创建的标签
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob) // 创建url
        document.body.appendChild(elink) // 把 创建的标签追加到body里
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink) // 移除标签
        this.$message({
          message: '导出成功！！！',
          type: 'success',
        })
        this.$refs.multipleTable.clearSelection()
      })
    },

    //查看商品信息
    handleCheak(index, row) {
      this.picList = []
      this.showCheak = true
      this.isDisabled = true
      this.isChange = 0
      orderCheck({ tradeGoods: row.tradeGoods }).then((res) => {
        this.picList.push({ name: '1', url: res.data.showDetails1 })
        this.picList.push({ name: '2', url: res.data.showDetails2 })
        this.picList.push({ name: '3', url: res.data.showDetails3 })
        this.list = res.data
      })
    },

    setFile(file) {
      //上传图片
      let imgFile = file.target.files[0]
      let formData = new FormData() //通过formdata上传
      formData.append('file', imgFile)
      upload(formData).then((res) => {
        this.allDeliveryUrl = res.data[0].fileName
      })
    },

    allDelivery() {
      api('/web/so/pdo', {
        excelUrl: this.allDeliveryUrl,
      }).then((res) => {
        if (res.code === 2000) {
          this.addList = {}
          this.$message.success(res.message)
          this.reload()
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //显示发货框
    isdelivery(index, row) {
      this.showDelivery = true
      api('web/address/gU', { id: row.addId }).then((res) => {
        this.addList = res.data
        this.addList.deliveryId = row.id
        this.addList.expressOrder = row.expressOrder
      })
    },

    //发货
    delivery() {
      orderEmit({
        expressOrder: this.addList.expressOrder,
        id: this.addList.deliveryId,
      }).then((res) => {
        if (res.code === 2000) {
          this.addList = {}
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },

    // 分页导航
    handlePageChange(val) {
      // this.$set(this.query, "pageIndex", val);
      this.query.pageNo = val
      this.getData()
    },

    //预览大图
    picPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 删除操作
    handleDelete(index) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning',
      })
        .then(() => {
          this.$message.success('删除成功')
          this.tableData.splice(index, 1)
        })
        .catch(() => { })
    },
  },
}
</script>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 180px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.green {
  color: #23b654;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.crop-demo {
  .pre-img {
    height: 146px;
    background: #f8f8f8;
    border: 1px solid #eee;
  }
}

.picPreview {
  width: 100%;
}
</style>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
